html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    background-color: #8BC6EC;
    background-image: linear-gradient(270deg, #8BC6EC 0%, #484bcc 100%);
    color: white;
    font-family: Raleway, Helvetica, Arial, sans-serif;
    line-height: 1.4;
    margin: 0;
}

h1,
h2,
h3 {
    font-family: Arial, Helvetica, sans-serif;
    font: bold;
    font-weight: 400;
}

main {
    display: block;
}

img {
    max-width: 100%;
}

.page-header {
    margin: 0;
    padding: 1rem;
}

@media (min-width: 30em) {
    .page-header {
        padding: 2rem 2rem 3rem;
    }
}

@media(min-width:30em) {
    .main-nav {
        position: fixed;
        /*可视窗口的居中位置显示*/
        left: 0;
        top: 8.25rem;
        z-index: 10;
        background-color: transparent;
        /* 把背景色设置为透明 */
        transition: background-color .5s linear;
        /* transition:property |duration |timing-function |delay;
        property:规定设置过渡效果的css属性的名称。
        duration：规定设置过渡效果需要多少秒或毫秒。
        timing-function：规定速度效果的速度曲线。
        delay：定义过渡效果何时开始执行。 */
        border-top-right-radius: 0.5em;
        border-bottom-right-radius: 0.5em;
        /* border-radius：length/persentage； */
    }
    .main-nav:hover {
        background-color: rgba(0, 0, 0, 0.6);
        /* 背景色 */
    }
}

.nav-links {
    display: flex;
    /*设置为flex布局*/
    margin-top: 0;
    margin-bottom: 1rem;
    padding: 0 1rem;
    /*上内边距0 下内边距1rem*/
    list-style: none;
    /* 不带点 */
    justify-content: space-between;
    /* 解决最后一排数量不够自动向两端排列问题 */
}

.nav-links>li+li {
    margin-left: 0.8em;
}


/*  */

.nav-links>li>a {
    display: block;
    padding: 0.8em 0;
    color: white;
    font-size: 0.8rem;
    text-decoration: none;
    /* 去掉下划线 */
    text-transform: uppercase;
    /* 转化大写 */
    letter-spacing: 0.06em;
    /* 字符间距 */
}

.nav-links__icon {
    height: 1.5em;
    width: 1.5em;
    vertical-align: -0.2em;
    /* 相对于该元素所在行的基线的垂直对齐 */
}

.nav-links>li>a:hover {
    color: hsl(40, 100%, 70%);
}

@media (min-width: 30em) {
    .nav-links {
        display: block;
        padding: 1em;
        margin-bottom: 0;
    }
    .nav-links>li+li {
        margin-left: 0;
        /* 左对齐 */
    }
    .nav-links__label {
        display: inline-block;
        /* 浮动效果 */
        margin-left: 1em;
        padding-right: 1em;
        opacity: 0;
        transform: translate(-1em);
        /* 进行水平垂直居中 */
        transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3), opacity 0.4s linear;
        /* 2D转换平移 */
    }
    .nav-links:hover .nav-links__label,
    .nav-links a:focus>.nav-links__label {
        opacity: 1;
        /* 元素的透明背景 */
        transform: translate(0);
    }
    .nav-links>li:nth-child(2) .nav-links__label {
        transition-delay: 0.1s;
    }
    .nav-links>li:nth-child(3) .nav-links__label {
        transition-delay: 0.2s;
    }
    .nav-links>li:nth-child(4) .nav-links__label {
        transition-delay: 0.3s;
    }
    .nav-links>li:nth-child(5) .nav-links__label {
        transition-delay: 0.4s;
    }
    .nav-links__icon {
        transition: transform 0.2s ease-out;
        /* 变换时间 */
    }
    .nav-links a:hover>.nav-links__icon,
    .nav-links a:focus>.nav-links__icon {
        transform: scale(1.3);
        /* 变大1.3倍 */
    }
}

.flyin-grid {
    margin: 0 1rem;
}

@media (min-width: 30em) {
    .flyin-grid {
        display: flex;
        flex-wrap: wrap;
        margin: 0 5rem;
    }
    .flyin-grid__item {
        flex: 1 1 300px;
        margin-left: 0.5em;
        margin-right: 0.5em;
        max-width: 600px;
    }
}

.card {
    margin-bottom: 1em;
    padding: 0.5em;
    background-color: white;
    color: hsl(210, 15%, 20%);
    box-shadow: 0.2em 0.5em 1em rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

.card>img {
    width: 100%;
    border-radius: 10px;
}